<template>
  <view class="bag_container">
    <!-- 红包背景 -->
    <view class="bag_bg"></view>
    <!-- 红包盖 -->
    <view class="bag_top" :class="open?'top_flip':''"></view>
    <!-- 红包信封 -->
    <view class="bag_result" :class="open?'top_result':''">
      恭喜您
      <br />获奖了
    </view>
    <!-- 红包底部 -->
    <image class="bag_bot" src="../../static/images/bag_bot.png" />
    <!-- 开红包按钮 -->
    <image
      class="btn_openbag"
      @click="getPrize"
      :class="open?'fadeOut animated':''"
      src="../../static/images/bag_open.png"
    />
  </view>
</template>
<script>
export default {
  data() {
    return {
      open: false,
      money: "",
    };
  },
  methods: {
    getPrize() {
      this.$emit("getIndex");
    },
    openBag(money) {
      console.log("红包金额", money);
      this.money = money;
      this.open = true;
    },
  },
};
</script>
<style lang="scss" scoped>
.bag_container {
  width: 750rpx;
  padding-top: 200rpx;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
}
.bag_top {
  z-index: 25;
  width: 426rpx;
  height: 220rpx;
  background: url("../../static/images/bag_top.png") no-repeat;
  background-size: 100% 100%;
   -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  transform-origin: 50% 0;
}
.bag_bot {
  position: absolute;
  width: 445rpx;
  height: 542rpx;
  z-index: 20;
}
.bag_bg {
  width: 400rpx;
  height: 500rpx;
  position: absolute;
  background: #d70c19;
}
.btn_openbag {
  width: 145rpx;
  height: 158rpx;
  position: absolute;
  z-index: 30;
  top: 320rpx;
}
.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}
.bag_result {
  opacity: 0;
  width: 300rpx;
  height: 100rpx;
  background-color: #fff;
  position: absolute;
  top: 149rpx;
   z-index: 30;
  color: #d70c19;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 42rpx;
}
.fadeOut {
  animation-name: fadeOut;
}
.top_flip {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  transform-origin: 50% 0;
  -webkit-animation: flip 3s linear both;
  -moz-animation: flip 3s linear both;
  animation: flip 3s linear both;
}
.top_result {
  -webkit-animation: top 1s linear both;
  -moz-animation: top 1s linear both;
  animation: top 1s linear both;
  animation-delay: 3s;
  z-index: 30;
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes flip {
  0% {
    transform: rotate3d(1, 0, 0, 0deg);
  }
  100% {
    transform: rotate3d(1, 0, 0, 180deg);
  }
}
@keyframes top {
  0% {
    opacity: 0;
  }

  100% {
   opacity: 1;
  }
}

</style>